<template>
	<view><text v-for="(item,index) in txtarr" :key="index" :class="[item.l?lightClass:'']">{{item.t}}</text></view>
</template>

<script>
	export default{
		props:{
			full:{ 
				type:String,
				default:''
			},
			part:{ 
				type:String,
				default:''
			},
			max:{ 
				type:Number
			},
			lightClass:{
				type:String,
				default:'text-blue'
			}
		},
		computed:{
			txtarr(){
				if(!this.part){
					return [{t:this.full,l:false}]
				}
				const txt = this.full.replace(/\s+/g,' ')
				const idx = txt.indexOf(this.part)
				if(idx<0){
					return [{t:this.full,l:false}]
				}
				const sur = this.max-this.part.length
				
				let leftOmit = true 
				let rightOmit = true 
				let leftLong = 0
				let rightLong = this.part.length
				for (let i = 0; i < sur ; i++) {
					if(i%2){
						if(idx+rightLong<this.full.length){
							rightLong++
						}else if(idx-leftLong>0){
							rightOmit = false
							leftLong++
						}else{
							rightOmit = false
						}
					}else{
						if(idx-leftLong>0){
							leftLong++
						}else if(idx+rightLong<this.full.length){
							leftOmit = false
							rightLong++
						}else{
							leftOmit = false
						}
					}
					
				}
				const lTxt = leftOmit?`…${txt.slice(idx-leftLong+1,idx)}`:txt.slice(idx-leftLong,idx)
				const rTxt = rightOmit? `${txt.slice(idx+this.part.length,idx+rightLong-1)}…`:txt.slice(idx+this.part.length,idx+rightLong)
				return [{t:lTxt,l:false},{t:this.part,l:true},{t:rTxt,l:false}]
			}
		}
	}
</script>

<style>
</style>